Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Input
We can add input boxes with the b-input component.
For example, we can write:
<template>
<b-field label="Name">
<b-input v-model="name"></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
It binds the inputted value with v-model .
We can style it in various ways.
The type sets the border-style:
<template>
<b-field label="Name" type="is-danger">
<b-input v-model="name"></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
is-danger makes the border red.
rounded makes the input rounded:
<template>
<b-field label="Name">
<b-input v-model="name" rounded></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
disabled makes it disabled:
<template>
<b-field label="Name">
<b-input v-model="name" disabled></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
loading makes it display a loading indicator:
<template>
<b-field label="Name">
<b-input v-model="name" loading></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
Icons
We can add icons to our form fields.
To do that, we set the icon-pack and icon props to add it:
<template>
<b-field label="search">
<b-input v-model="name" icon-pack="fa" icon="search">></b-input>
</b-field>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
fa stands for Font Awesome.
icon has the icon class name.
To make the icon display, we added the icon CSS to the index.html file’s head tag:
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
Validation
We can add form validation.
For example, we write:
<template>
<div>
<b-field label="Email" type="is-danger" message="This email is invalid">
<b-input value="john@" maxlength="30"></b-input>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We set the type and messge to display the styles and messages.
Password
The password-reveal prop to add a button to reveal the password:
<template>
<div>
<b-field>
<b-input type="password" placeholder="Password input" password-reveal></b-input>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
Size
The size prop sets the size of the input:
<template>
<div>
<b-field>
<b-input placeholder="Medium" size="is-medium"></b-input>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
Conclusion
We can add form input boxes with the b-input component that comes with Buefy.
